<template>
    <div class="mine" v-if="userInfo">
        <!-- 个人信息卡片 -->
          <el-row class="userInfo" v-if="userInfo">
            <el-col class="uesr">
                <el-card :body-style="{ padding: '0px' }">
                    <avatar></avatar>
                    <div style="padding: 14px">
                        <hr>
                    <span class="name">{{userInfo.username}}</span>
                    <span class="phone">{{userInfo.phone}}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
            <el-row>
                <el-col :span="20" class="box"  id="box">
                    <!-- 饼图 -->
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="20" class="boxone" id="boxone">
                    <!-- 条形图 -->
                </el-col>
            </el-row>
    </div>
</template>

<script>
import { onMounted,reactive,ref } from 'vue';
import * as echarts from 'echarts';
import avatar from '@/components/Avatar.vue';
import {useStore} from 'vuex';
import {ajax} from '@/api';
export default {
    components:{
        avatar,
        
    },
    setup(props){
        const state = reactive({
            dataArr1:[],
            dataArr2:[],
        })
        const store = useStore();
        const initStoreData = async ()=>{
            let {code,data} = await ajax.getGood();
            store.state.cateList.map(item=>{
                let count = data.filter(val=>val.cateid == item.catevalue).length;
                return {...item,count}
            }).forEach(v=>{
                if(v.count != 0){
                    state.dataArr1.push({value:v.count,name:v.catename});
                }
            });
            chartInit();
            store.state.typeList.map(item=>{
                let count = data.filter(val=>val.typeid == item.typevalue).length;
                return {...item,count}
            }).forEach(v=>{
                if(v.count != 0){
                    state.dataArr2.push({value:v.count,name:v.typename});
                }
            });
            boxone();
        }
        const chartInit =  ()=>{
               var myChart =  echarts.init(document.getElementById('box'))
                var option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                        name: '商品类型统计图',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data:state.dataArr1
                        //  [
                        //     { value: 1048, name: 'Search Engine' },
                        //     { value: 735, name: 'Direct' },
                        //     { value: 580, name: 'Email' },
                        //     { value: 484, name: 'Union Ads' },
                        //     { value: 300, name: 'Video Ads' }
                        // ]
                        }
                    ]
                    };
                 myChart.setOption(option)
          }
          const boxone =  ()=>{
            let myboxone = echarts.init(document.getElementById('boxone'))
             var option = {
                xAxis: {
                    type: 'category',
                    data: state.dataArr2.map(item=>item.name)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: state.dataArr2.map(item=>item.value),
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                    }
                ]
                };
                 myboxone.setOption(option)
          }
        onMounted(()=>{
            initStoreData();
            
            
        });
        return {
            // boxref,
            // boxoneref,
        }
    }
}
</script>

<style lang="scss" scoped>
 .image{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-left: 47px;
    margin-top: 20px;
}
.img{
    position: absolute;
    top: 10px;
    right: 100px;
}
.box{
    width: 400px;
    height: 400px;
    position: absolute;
    top: -200px;
    left: 350px;
}
.boxone{
     width: 800px;
    height: 400px;
    position: absolute;
    top: 160px;
    left: 20px;
}
.mine{
    width: 100%;
    height: 100%;
    position: relative;
    .userInfo{
        width: 200px;
        height: 200px;
        margin-top: 20px;
        margin-left: 20px ;
    }
}
</style>